<template>
  <div>
    <!-- 
      ref属性：就可以得到指定html标签的dom对象,它就是会把属性的值，注册到 this.$refs对象的属性上，属性值为dom对象
     -->
    <!-- <h3 ref="titleRef">父组件</h3> -->
    <!-- vue3提供的新的方案，写回调函数 -->
    <h3 :ref="getDom">父组件 -- {{ title }}</h3>
    <button @click="getTitleDom">获取标题dom</button>
    <hr />
    <!-- 
      ref属性：如果绑定在自定义组件中，则它返回的是组件的实例对象，用此对象完成组件间的传值
     -->
    <child ref="childRef" />
    <button @click="getChildInstance">获取标题Child组件实例</button>
  </div>
</template>

<script>
import child from '@/components/child/index.vue'

export default {
  components: {
    child
  },
  data() {
    return {
      count: 100,
      title: '父组件标题'
    }
  },
  methods: {
    // vue3新提供的
    getDom(el) {
      // console.log(el)
      this.titleRef = el
    },
    getTitleDom() {
      // console.log(this.$refs.titleRef.innerHTML)
      console.log(this.titleRef)
    },
    getChildInstance() {
      // console.log(this.$refs.childRef)
      // this.title = this.$refs.childRef.title
      const title = this.$refs.childRef.setTitle(this.title)
      console.log(title)
    }
  }
}
</script>

<style lang="scss" scoped></style>
